<template>
  <n-data-table :columns="columns" :data="orders"></n-data-table>
  <div class="py-4 flex flex-jc-center">
    <n-pagination v-model:page="page" :page-count="pageTotal"></n-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, h, ref, watchEffect, toRefs } from "vue";
import {
  NTag,
  NDataTable,
  NPagination,
  NEllipsis,
  NButton,
  useMessage,
} from "naive-ui";

import { useBook } from "../hooks/UseBooks";
import { useOrder, useOrders } from "../hooks/UseOrders";
import { Order } from "../interface/order.interface";

export default defineComponent({
  name: "OrderList",
  components: { useMessage, NTag, NDataTable, NPagination, NEllipsis, NButton },
  props: {
    status: Number,
  },
  setup(props) {
    const { updateBookNum } = useBook();
    const message = useMessage();
    const { updateOrder } = useOrder();
    const { orders, getOrders } = useOrders();
    const page = ref(1);
    const pageSize = ref(5);
    const pageTotal = ref(1);
    const { status } = toRefs(props);

    async function flashList() {
      const total = await getOrders(status.value, page.value, pageSize.value);
      pageTotal.value = Math.floor(total / pageSize.value) + 1;
    }

    watchEffect(() => {
      flashList();
    });

    const columns = [
      {
        title: "ID",
        key: "_id",
      },
      {
        title: "商品",
        key: "books",
        render(row: Order) {
          const bookList = row.cars.map((i) => i.book.name);
          const text = h(
            NEllipsis,
            {
              style: {
                width: "150px",
              },
            },
            {
              default: () => {
                return bookList.join(",");
              },
            }
          );
          return text;
        },
      },
      {
        title: "状态",
        key: "status",
        render(row: Order) {
          const tag = h(
            NTag,
            { type: "info" },
            {
              default: () => {
                if (row.status == 0) return "未下单";
                if (row.status == 1) return "待发货";
                if (row.status == 2) return "待确认";
                if (row.status == 3) return "已完成";
              },
            }
          );
          return tag;
        },
      },
      {
        title: "快递单号",
        key: "express",
      },
      {
        title: "总价",
        key: "price",
        render(row: Order) {
          let total = 0;
          row.cars.forEach((i) => {
            total += i.book.price * i.number;
          });
          return total.toFixed(2);
        },
      },
      {
        title: "操作",
        key: "option",
        render(row: Order) {
          if (row.status == 1) {
            return h(
              NButton,
              {
                size: "small",
                type: "info",
                dashed: true,
                onClick: () => {
                  message.info("暂无功能实现");
                },
              },
              {
                default: () => "提醒发货",
              }
            );
          }
          if (row.status == 2) {
            return h(
              NButton,
              {
                size: "small",
                type: "error",
                dashed: true,
                onClick: async () => {
                  try {
                    row.cars.forEach(async (i) => {
                      await updateBookNum(i.book._id, i.number);
                    });
                    row.status = 3;
                    await updateOrder(row);
                    message.success("收货成功");
                    await flashList();
                  } catch (e) {
                    message.error("收货失败");
                  }
                },
              },
              {
                default: () => "确认收货",
              }
            );
          }
          if (row.status == 3) return "已完成";
          return "无";
        },
      },
    ];
    return { orders, columns, page, pageTotal };
  },
});
</script>

<style></style>
